<template>
    <div class="domain-reply">
        <el-dialog title="回复评论" :visible.sync="replyDialogVisible" custom-class="reply-dialog" :before-close="closeDialog" top="25vh" center>
            <el-input
                type="textarea"
                :placeholder="commendData.placeholder"
                v-model="replyText"
                maxlength="50"
                rows="4"
                show-word-limit>
            </el-input>
            <div class="reply-button"><el-button type="success" :disabled="disabledSubmit" @click="submitReply">提交</el-button></div>
        </el-dialog>
    </div>
</template>

<script>
import {post} from '../../utils/httpRequest'
export default {
    data(){
        return {
            replyText:"",
            disabledSubmit:false
        }
    },
    props:{
        replyDialogVisible: Boolean,
        commendData: Object
    },methods:{
        closeDialog(){
            this.replyText="";
            this.$emit("showReply",false)
        },
        submitReply(){
            this.disabledSubmit=true;
            if(this.replyText===""){
                this.$notify.error({
                    title: "通知",
                    message: '留言不能为空'
                });
                this.disabledSubmit=false;
                return
            }
            const reply_result={index:this.commendData.index,reply:{}};
            post(this.http.blog_article.comment.replyComment,Object.assign({}, this.commendData, {replyText:this.replyText})).then((response)=>{
                if(response.success){
                    this.$notify.success({
                        title: "通知",
                        message: response.message
                    });
                    reply_result.reply=response.data;
                    //关闭窗口传递回复的评论到评论下方
                    this.replyText="";
                    this.$emit("reply_Success",reply_result)
                    this.$emit("showReply",false)
                }
                this.disabledSubmit=false;
            })
        }
    }
}
</script>

<style scoped>
.reply-button{
    margin: 5px 0px;
    text-align: center;
}
</style>

<style>
.reply-dialog{
    width: 420px;
}
@media screen and (max-width: 500px){
    .reply-dialog{
        width: 400px;
    }
}
</style>
